<template>
  <el-dialog :visible.sync="dialogVisible"
    top="20vh"
    :close-on-click-modal="false"
    append-to-body
    :custom-class="`img-captcha-dialog ${offsetX}`"
    width="320px"
    @closed="onDialogClose">
    <p class="title">图形验证码</p>
    <el-form ref="captchaForm"
      :model="form"
      onsubmit="return false"
      :rules="rules">
      <div class="img-wrap">
        <div class="img-box"
          v-if="!captcha || loading">
          <div class="el-image__error">{{loading?'加载中':'加载失败'}}</div>
        </div>

        <el-image :src="captcha"
          class="img-box"
          v-else></el-image>
        <div class="img-text fz12">看不清?<el-button class="fz12" type="text"
            @click="getCaptcha">换一张</el-button>
        </div>
      </div>
      <el-form-item prop="captcha"
        style="margin-bottom:0;">
        <el-input v-model="form.captcha"
          placeholder="输入上方图形验证码"
          maxlength="4"
          @keydown.enter.native="complete"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
      class="dialog-footer">
      <el-button type="primary"
        @click="complete"
        size="small">确 定</el-button>
      <el-button @click="dialogVisible = false"
        size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { menuRouter } from '@/router'
import { getCodeImg } from '@/api/login'
export default {
  name: 'ImgCaptchaDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      offsetX: '',
      captcha: '',
      form: {
        captcha: '',
        captchaID: ''
      },
      rules: {
        captcha: [
          { require: true, message: '请输入图形验证码', trigger: ['change'] }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.getCaptcha()
      }
    }
  },
  created () {
    const path = location.pathname
    const offsetPath = menuRouter.map(item => item.path)
    if (offsetPath.includes(path)) {
      this.offsetX = 'dialog-offset'
    }
  },
  methods: {
    getCaptcha () {
      this.loading = true
      this.captcha = ''
      getCodeImg({ offset: 169 }).then(res => {
        const data = res.data || {}
        this.$nextTick(() => {
          this.captcha = data.captcha
        })
        this.form.captchaID = data.id
      }).finally(e => {
        this.loading = false
      })
    },
    complete () {
      if (!this.form.captcha) {
        this.$PsMessage({ message: '请输入图片验证码' })
      } else if (/^\w{4}$/.test(this.form.captcha)) {
        this.$emit('onSendSms', this.form)
      } else {
        this.$PsMessage({ message: '图片验证码错误，请重新输入' })
      }
    },
    onDialogClose () {
      this.imgUrl = ''
      this.$refs.captchaForm.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/theme/common/var";
.title {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 20px;
}
.img {
  &-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
  }
  &-box {
    width: 160px;
  }
  &-text {
    .el-button {
      padding: 0;
    }
  }
}
.dialog-footer {
  text-align: center;
  .el-button {
    width: 80px;
  }
}
</style>
<style lang="scss">
.img-captcha-dialog {
  .el-dialog__body {
    padding: 0 34px 20px;
  }
}
</style>
